<template>
    <div class='footer'>        
        <ul>
            <router-link :key='index' 
                v-for='(item,index) in list' 
                @click.native='getIndex(index)'
                :to='item.path'
                >
                <li :class="isgaoliang==index?'select':''">
                    <i class='iconfont' :class='item.iconfont'></i>
                    <p>{{ item.msg }}</p>
                </li>
            </router-link> 
            
        </ul>
        <div class='gobacktop' ref='goTop' @click='gobacktoTop()'>
            <i class='iconfont'>&#xe611;</i>
        </div>
    </div>
</template>

<script>
// import { router-link } from 'vue-router';
import { mapState,mapMutations } from 'vuex'
import $ from 'jquery'
export default {
//   name:'Footer',
  data(){
      return {
        //   count:1
        list:[
            {
                path:'/',
                iconfont:'icon-changyonglogo40',
                msg:'外卖'
            },
            {
                path:'/find',
                iconfont:'icon-faxian',
                msg:'发现'
            },
            {
                path:'/indent',
                iconfont:'icon-dingdan1',
                msg:'订单'
            },
            {
                path:'/myself',
                iconfont:'icon-wode',
                msg:'我的'
            }
        ],
        // isShowgotop:false,
      }
  },
  methods:{
      gobacktoTop(){
          $('html,body').animate({scrollTop:0},500);
      },
      ...mapMutations({
          getIndex:'GETINDEX'
      })
  },
  computed:{
    // isShowgotop(){
    //     var toggle = false;
    //     var that=this;
    //     $(window).scroll(function(){
    //     //    console.log($(window).scrollTop());
    //         var a = false;
    //        if($(window).scrollTop() > 666){
    //             if(a == false){
    //                 a = true;
    //                 toggle = true;
    //             }
    //        }else{
    //             if(a == true){
    //                 a =false;
    //                 toggle = false;
    //             }
    //        }
            
    //    }) 
    //    return toggle
    // },
    
    ...mapState(['isgaoliang','toggle'])
  },
  mounted(){
        $(document).ready(function(){
            $(window).scrollTop(0)
        })
        $(window).scroll(function(){

            if($(window).scrollTop() >300 && $('.gobacktop').css('display') == 'none'){
                $('.gobacktop').attr('id','show')
            }else if($(window).scrollTop() <=300 && $('.gobacktop').css('display') == 'block'){
                $('.gobacktop').attr('id','hide')
            } 
            // console.log($('.gobacktop'));
            // $(window).scrollTop() >300 ?$('.gobacktop').attr('id','show'):$('.gobacktop').attr('id','hide')
       })
  }
}
</script>

<style lang="scss" scoped>
    @import '../../static/hotcss/px2rem.scss';
    .footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height:px2rem(99);
        border-top: px2rem(1) solid #CCC;
        box-sizing: border-box;
        padding-top: px2rem(10);
        background-color: #FFF;
        // display: flex;
        background: white;
        ul{
            height:px2rem(90);
            display: flex;
            a{
                flex: 1;
                 li{
                    display: flex;
                    // justify-content: 
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    color: #666;
                    i{
                        font-size: px2rem(40)
                    }
                    p{
                        font-size: px2rem(20);
                        line-height: px2rem(24);
                    }
                }
                .select{
                    color:#0089dc;
                }
            }
        }
        .gobacktop{
            width: px2rem(83);
            height: px2rem(83);
            border-radius: 50%;
            position: fixed;
            right: px2rem(30);
            bottom: px2rem(150);
            border: px2rem(1) solid #999;
            text-align: center;
            background-color: #fff;
            // animation: gotopshow 1s ease;
            // opacity: 0;
            display: block;
            .iconfont{
                font-size: px2rem(50);
                line-height: px2rem(83);
                color: #999;
            }          
        }
        #hide{
            animation: gotophide 2s ease;
        }
        #show{
            animation: gotopshow 2s ease;
        }
    }
    @keyframes gotopshow{
        0%{
            display: block;
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes gotophide{
        0%{
            opacity: 1;           
        }
        100%{
            opacity: 0;
            display:none;
        }
    }
</style>



